import React, { memo, useEffect, useState } from 'react'
import { getRecommendRequest } from '../../api/request'
import { Wrapper } from './style'
import { connect } from 'react-redux'
import { RootState } from '../../store/reducer'
import { changeDianzan, getRecommendList } from './store/actionCreators'
import { IRecommendList } from './store/reducer'

// import {  }
interface recommendProps {
  recommendList: IRecommendList;
  enterLoading: boolean;
  getRecommendDataDispatch: () => void
  setDianzanDispatch: (id:number) => void
}

const Recommend: React.FC<recommendProps> = (props) => {
  const { recommendList, enterLoading } = props;
  console.log(recommendList)
  const { getRecommendDataDispatch, setDianzanDispatch } = props;
  const hanldeDianzan = (id:number) => {
    setDianzanDispatch(id)
  }
  useEffect(() => {
    if(!recommendList.length){
      getRecommendDataDispatch();
    }
  }, [])
  return (
    <Wrapper >
      {recommendList.map(item => (
        <div className='container' key={item.sort}>
          <img src={item.designCover} alt="" />
          <div className="title">{item.designName}</div>
          <div className="footer">
            <div className="author">
              <img src={item.designerAvatar} alt="" />
              <div className="name">{item.designerName}</div>
            </div>
            <div className="data_use">
              <div className="data_like">
                 <div className="data_like_container">
                  <i 
                    className='iconfont icon-aixin'
                    onClick={() => hanldeDianzan(item.sort)}
                  ></i>
                  <span>{item.favoriteCount}</span>
                 </div>
              </div>
              <div className="data_watch">
                <i className='iconfont icon-chakan'></i>
                <span>{item.browseCount}</span>
              </div>
            </div>
          </div>
        </div>
      ))}
      {enterLoading ? <div>loading...</div> : null}
    </Wrapper>
  )
}

const mapStateToProps = (state:RootState) => {
  return {
    recommendList: state.recommend.recommendList,
    enterLoading: state.recommend.enterLoading
  }
}
const mapDispatchToProps = (dispatch:any) => {
  return {
    getRecommendDataDispatch() {
      dispatch(getRecommendList())
    },
    setDianzanDispatch(id:number) {
      dispatch(changeDianzan(id))
    }

  }
}
export default connect(mapStateToProps, mapDispatchToProps)(memo(Recommend))

